<template>
  <div class="page-view">
    <div class="teacher-info-box">
      <Avatar
        :src="teacherInfo.TeacherImg"
        class="teacher-img"
      />
      <div class="teacher-name">
        {{ teacherInfo.TeacherName }}
      </div>
      <div class="teacher-content">
        <span
          v-if="teacherInfo.CourseFeatures"
          class="teacher-prompt"
        >
          招牌主讲：
        </span>{{ teacherInfo.CourseFeatures }}
      </div>
    </div>
    <div
      v-if="teacherInfo.TeacherIntroduce"
      class="teacher-introduce"
    >
      <span class="teacher-prompt">
        讲师简介：
      </span>{{ teacherInfo.TeacherIntroduce }}
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    Avatar: () => import(/* webpackChunkName: "publicComp" */ 'components/Mine/Avatar.vue'),
  },
  data () {
    return {
      teacherInfo: [],
    }
  },
  created () {
    this.getTeacherInfo()
  },
  methods: {
    getTeacherInfo () {
      this.$axios({
        method: 'get',
        url: 'Course/GetTeacherInfoForH5',
        data: {
          TeacherId: this.$route.query.teacherId,
        },
      }).then(res => {
        this.teacherInfo = res.TeacherInfo
      })
    },
  },
})
</script>
<style lang="scss" scoped>
.page-view {
  padding-top: 150px;
  padding-bottom: 30px;
  min-height: 100%;
  background-color: #fff;
}
.teacher-info-box,.teacher-introduce {
  position: relative;
  width: 92%;
  margin: 0 auto;
  text-align: center;
  // border: 1px solid #E9E9E9;
  @include px1border(all, #E9E9E9);
  box-shadow:0px 3px 21px 0px rgba(0, 0, 0, 0.2);
  border-radius:5px;
}
.teacher-img {
  width: 160px !important;
  height: 160px !important;
  margin-top: -80px;
}
.teacher-name {
  font-size: 36px;
  color: #333333;
  margin-top: 20px;
}
.teacher-content {
  font-size: 30px;
  margin: 40px 50px;
  text-align: left;
  color: #4B515E;
  line-height: 46px;
}
.teacher-introduce {
  font-size: 30px;
  color: #4B515E;
  margin: 0 auto;
  margin-top: 40px;
  padding: 50px;
  text-align: left;
  line-height: 46px;
}
</style>
